<template>
    <div class="">
        <el-card class="box-card">
            <el-button type="primary" class="mb10" @click="addUser">添加用户</el-button>
            <el-table :data="tableData" style="width: 100%" border stripe>
                <el-table-column prop="id" label="ID" align="center"> </el-table-column>
                <el-table-column prop="nickName" label="名字" align="center"> </el-table-column>
                <el-table-column prop="userCode" label="员工编号" align="center"></el-table-column>
                <el-table-column prop="gender" label="性别" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.gender ? '男' : '女' }}
                    </template>
                </el-table-column>
                <el-table-column prop="qualification" label="学历" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.qualification === 10">高中及以下</div>
                        <div v-else-if="scope.row.qualification === 20">大专</div>
                        <div v-else-if="scope.row.qualification === 30">本科</div>
                        <div v-else-if="scope.row.qualification === 40">硕士</div>
                        <div v-else>博士</div>
                    </template>
                </el-table-column>
                <el-table-column prop="mobile" label="手机" align="center"> </el-table-column>
                <el-table-column prop="profession" label="工种" align="center"> </el-table-column>
                <el-table-column prop="portrait" label="头像" width="120" align="center">
                    <template slot-scope="scope">
                        <img class="wh100" :src="scope.row.portrait" alt="" />
                    </template>
                </el-table-column>
                <el-table-column prop="email" label="邮箱" align="center"> </el-table-column>
                <el-table-column prop="status" label="状态" align="center"> </el-table-column>
                <el-table-column prop="userName" label="用户名" align="center"> </el-table-column>
                <el-table-column prop="password" label="密码" align="center"> </el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="disableUser(scope.row)">禁用</el-button>
                        <el-button type="primary" @click="checkDetail(scope.row)">详情</el-button>
                    </template>
                </el-table-column>

                <!-- <el-table-column prop="roleModel" label="角色信息" align="center"> </el-table-column> -->
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="query.pagenum"
                :page-sizes="[2, 3, 4, 5]"
                :page-size="query.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>

            <!-- 添加用户 -->
            <el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
                <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="角色ID">
                        <el-select class="sel" v-model="form.roleID" placeholder="请选择">
                            <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="用户名">
                        <el-input v-model="form.userName"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="form.password"></el-input>
                    </el-form-item>
                    <el-form-item label="员工名字">
                        <el-input v-model="form.nickName"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-select class="sel" v-model="form.gender" placeholder="请选择">
                            <el-option v-for="item in genderOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="学历">
                        <el-select class="sel" v-model="form.qualification" placeholder="请选择">
                            <el-option v-for="item in QualificationList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="手机号码">
                        <el-input v-model="form.mobile"></el-input>
                    </el-form-item>
                    <el-form-item label="工种">
                        <el-input v-model="form.profession"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="form.email"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select class="sel" v-model="form.status" placeholder="请选择">
                            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="头像URL">
                        <input type="file" name="" id="" ref="uploadImg" style="display: none" @change="uploadImg" />
                        <img class="wh100" :src="form.portrait" alt="" />
                        <el-button type="primary" @click="$refs.uploadImg.click()">上传</el-button>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirmAdd">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 用户详情 -->
            <el-dialog title="编辑用户信息" :visible.sync="editDialogVisible" width="50%" @close="editDiaClosed">
                <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="员工ID">
                        <el-input v-model="detilForm.id"></el-input>
                    </el-form-item>
                    <el-form-item label="角色ID">
                        <el-select class="sel" v-model="detilForm.roleID" placeholder="请选择">
                            <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="用户名">
                        <el-input v-model="detilForm.userName"></el-input>
                    </el-form-item>
                    <el-form-item label="用户密码">
                        <el-input v-model="detilForm.password"></el-input>
                    </el-form-item>
                    <el-form-item label="员工名字">
                        <el-input v-model="detilForm.nickName"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-select class="sel" v-model="detilForm.gender" placeholder="请选择">
                            <el-option v-for="item in genderOptions" :key="item.label" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="学历">
                        <el-select class="sel" v-model="detilForm.qualification" placeholder="请选择">
                            <el-option v-for="item in QualificationList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="手机号码">
                        <el-input v-model="detilForm.mobile"></el-input>
                    </el-form-item>
                    <el-form-item label="工种">
                        <el-input v-model="detilForm.profession"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="detilForm.email"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select class="sel" v-model="detilForm.status" placeholder="请选择">
                            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="头像URL">
                        <input type="file" name="" id="" ref="uploadImg" style="display: none" @change="uploadImg" />
                        <img class="wh100" :src="detilForm.portrait" alt="" />
                        <el-button type="primary" @click="$refs.uploadImg.click()">上传</el-button>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirmEdit()">确 定</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
import { getRoleInfo, addRole, getUserList, addUser, getAllRoleList, disableUser, getQualification, checkDetail, editUserInfo } from '@/api/role.js'
import { uploadPic } from '@/api/goods.js'
export default {
  name: 'rolemanage',
  data () {
    return {
      tableData: [],
      total: 0,
      query: {
        pagesize: 3,
        pagenum: 1,
        name: ''
      },
      QualificationList: [],
      statusOptions: [
        {
          value: true,
          label: '启用'
        },
        {
          value: false,
          label: '禁用'
        }
      ],
      genderOptions: [
        {
          label: '男',
          value: true
        },
        {
          label: '女',
          value: false
        }
      ],
      qualificationOptions: [],
      roleList: [],
      form: {
        roleID: '',
        userName: '',
        password: '',
        nickName: '',
        gender: true,
        qualification: 10,
        mobile: '',
        profession: '',
        email: '',
        status: true,
        portrait: ''
      },
      // 用户详情对象
      detilForm: {},
      editDialogVisible: false,
      //   addUserForm: {
      //     roleID:'',
      //     userName: '',
      //     password: '',
      //     nickName: '',
      //     gender: false,

      //   },
      addDialogVisible: false
    }
  },
  created () {
    this.getUserList()
    this.getAllQualification()
    this.getAllRoleList()
  },
  mounted () {

  },
  methods: {
    async getRoleInfo () {
      const { Data } = await getRoleInfo({
        pageIndex: 1,
        pageSize: 20,
        name: ''
      })
      this.total = Data.paging.totalItemCount
      this.tableData = Data.list
      console.log(Data.paging.totalItemCount)
      console.log(Data)
    },

    // 获取所有角色下拉列表
    async getAllRoleList () {
      const { Data } = await getAllRoleList()
      this.roleList = Data.dictList
    },

    // 获取所有学历下拉列表
    async getAllQualification () {
      const { Data } = await getQualification()
      this.QualificationList = Data.dictList
    },

    // 获取所有用户列表
    async getUserList () {
      const { Data } = await getUserList({
        pageSize: this.query.pagesize,
        pageIndex: this.query.pagenum,
        nickName: null,
        userCode: null,
        mobile: null
      })
      this.total = Data.paging.totalItemCount
      this.tableData = Data.list
      console.log(Data)
    },

    // 禁用用户
    async disableUser (userId) {
      console.log(userId.id)
      const data = await disableUser({
        id: userId.id
      })
      if (data.RequestStatus !== 200) return this.$message.error('操作失败')
      this.$message.success('操作成功')
      this.getUserList()
      console.log(data)
    },

    // 添加角色
    async addRoles () {
      const { Data } = await addRole()
      console.log(Data)
    },

    // 添加用户
    addUser () {
      this.addDialogVisible = true
    },

    // 确认添加用户
    async confirmAdd () {
      const data = await addUser({
        ...this.form
      })
      if (data.RequestStatus !== 200) return this.$message.error('添加用户信息失败')
      this.$message.success('添加用户信息成功')
      this.addDialogVisible = false
      this.getUserList()
    },

    addDialogClosed () {
      this.form = {}
    },

    // 查看用户详情
    async checkDetail (user) {
      this.editDialogVisible = true
      const { Data } = await checkDetail({
        id: user.id
      })
      console.log(Data)
      this.detilForm = { ...Data, roleID: Data.roleModel.id }
      console.log('用户详情-----', this.detilForm)
    },

    editDiaClosed () {
      this.detilForm = {}
    },

    // 上传图片或者视频到服务器
    async uploadImg (e) {
      // console.log('kaka', e.target.files[0].type)
      const file = e.target.files[0]
      // const type = (file.type.indexOf('image') !== -1) ? 10 : 20
      if (!file.size) return
      const formData = new FormData()
      formData.append('file', file)
      formData.append('fileCategory', 10)
      const { Data } = await uploadPic(formData)
      console.log(Data)
      const url = 'http://118.31.13.253:810/Upload/' + Data.url
      // this.form.resourcelist.push({ url, type, level: this.form.resourcelist.length })
      // this.$refs.uploads.value = ''
      this.form.portrait = url
      this.detilForm.portrait = url
    },

    // 确认修改
    async confirmEdit () {
      const data = await editUserInfo({
        ...this.detilForm
      })
      if (data.RequestStatus !== 200) return this.$message.error('修改信息失败')
      this.$message.success('修改用户信息成功')
      this.editDialogVisible = false
      this.getUserList()
      this.userId = ''
      console.log(data)
    },

    // 监听页面条数发生变化
    handleSizeChange (newPageSize) {
      this.query.pagesize = newPageSize
      this.getUserList()
    },

    // 监听页面页数发生变化
    handleCurrentChange (newPageNum) {
      this.query.pagenum = newPageNum
      this.getUserList()
    }
  }
}
</script>

<style scoped>
.wh100 {
    width: 100px;
    height: 100px;
}
.mb10 {
    margin-bottom: 10px;
}
.el-form {
    display: flex;
    flex-wrap: wrap;
}
.el-form--inline .el-form-item {
    display: flex;
    flex: 25%;
}
.el-form--inline .el-form-item {
    margin-right: 0px;
}
.el-input__inner {
    padding: 0 30px;
}
.el-form-item__content {
    flex: 1;
}
.sel {
    width: 190px;
}
</style>
